<template>
  <div>
    <x-header :left-options="{backText: ''}" :right-options="{showMore: true}" @on-click-more="showMenus = true" >选择题型</x-header>
    <group gutter="0">
      <x-img :src="$store.state.imgPath" ></x-img>
      <div style="background-color:rgba(0,0,0,0.6);color: white;text-align: center;line-height: 40px;font-size: 18px;position: absolute;bottom: 0;width: 100%;" @click="$router.go(-1)">{{$store.state.title}}</div>
    </group>
    <group gutter="0">
      <ul class="ui-some-info">
        <li>270天7小时45分</li>
        <li>45632</li>
        <li>jone</li>
      </ul>
    </group>
    <group>
      <x-textarea readonly='true' :max="200" placeholder="此处为投票说明" :height="200" :rows="8" :cols="30" @on-blur="saveText"></x-textarea>
    </group>
    
    <box gap="10px 10px">
        <flexbox>
          <flexbox-item>
            <x-button type="primary" link="texedit">保存</x-button>
          </flexbox-item>
          <flexbox-item>
            <x-button type="warn" link="uploadimg">保存并预览</x-button>
          </flexbox-item>
        </flexbox>
      </box>
  </div>
</template>

<script>
import { Group, Cell, XTextarea, XImg, XButton, Box, Flexbox, FlexboxItem, XHeader } from 'vux'
import store from '@/store'
export default {
  store,
  components: {
    Group,
    Cell,
    XTextarea,
    XImg,
    Flexbox,
    XButton,
    FlexboxItem,
    Box,
    XHeader
  },
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      times: [[{name: '请选择', value: '请选择'}, {name: '投票前', value: '投票前'}, {name: '投票后', value: '投票后'}]],
      selectShowF: true,
      selectedText: ['请选择'],
      minuteListValue: '',
      title: ''
    }
  },
  methods: {
    selectShow (key) {
      this.selectShowF = !this.selectShowF
    },
    saveText (value) {
      this.$store.commit('updateState', {key: 'title', value: this.title})
    },
    change (value) {
      console.log(this.$store.state)
      if (value === '1') {
        this.$store.commit('updateState', {key: 'tSet', value: this.selectedText})
      } else {
        this.$store.commit('updateState', {key: 'endTime', value: this.minuteListValue})
      }
    }
  }
}
</script>

<style scoped>
.weui-label{
  width: auto !important;
}
.vux-x-img{
  width: 100%;
  display: block;
}
.ui-some-info{
  display: -webkit-flex;
  display: flex;
  align-content: space-between;
  justify-content: center;
  flex-direction: row;
  list-style: none;
  padding: 0 30px;
}
.ui-some-info > li{
  flex: 1;
  text-align: center;
  font-size: 14px;
}
</style>
